<template>
	<view class="p-[20rpx]">
		<view class="">
			<!-- <mescroll-body
			 @init="mescrollInit" 
			 top="0" 
			 @down="downCallback" 
			 :bottom="90" 
			 :up="upOption" 
			 @up="upCallback"> -->
			<view v-for="(item,index) in buslistlist.list" :key="index" @click="goDetalis(item)"
				class="bg-[#fff] rounded-[20rpx] p-[20rpx] mb-[20rpx]">
				<view class="flex items-center justify-between">
					<view class="flex items-center">
						<!-- <image class="w-[106rpx] h-[106rpx] rounded-[10rpx] mr-[20rpx]" src="../../../static/logo.png"></image> -->
						<view class="w-[106rpx] h-[106rpx]">
							<u-avatar :size="50" :text="item.shopName.slice(-2)" font-size="16" bg-color="#FFB041"></u-avatar>
						</view>
						<view class="ml-[20rpx]">
							<view class="pb-[10rpx] typeface">
								{{item.shopName}}
							</view>
							<view class="flex items-center">
								<image class="w-[23rpx] h-[27rpx] mr-[13rpx]" src="@/static/homeimg/money.png">
								</image>
								<view class="typefacenum">
									余额：<text class="text-[#FB2A2A]">￥{{item.balance}}</text>
								</view>
							</view>
						</view>
					</view>

					<view class="">
						<image class="w-[48rpx] h-[40rpx] pt-[5rpx]" src="@/static/order/rightarrow.svg"></image>

					</view>
				</view>

			</view>
			<view class="h-[80vh] flex justify-center items-center flex-col" v-if="buslistlist.list.length<1">
				<view class="">
					<image class="w-[320rpx] h-[300rpx]" src="@/static/homeimg/datanull.png" mode="aspectFit">
					</image>
				</view>
				<view class="flex text-[30rpx] text-[#999] justify-center items-center">
					暂无数据
				</view>
			</view>
			<!-- </mescroll-body> -->
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
	} from 'vue'
	import {
		storevluebusiness
	} from "@/api/home.js"
	import {
		onPageScroll,
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app';
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	const buslistlist = reactive({
		list: []
	})
	import {
		useStore
	} from '@/stores/user.js'
	const store = useStore();
	import {
		storeToRefs
	} from 'pinia'
	let {
		busliasdetals
	} = storeToRefs(store);
	onShow(() => {
		storevluebusiness({
			page: 1,
			limit: 10
		}).then(res => {
			console.log(res, "储值列表")
			if (res.code == 200) {
				buslistlist.list = res.result
			}
		})
	})
	const {
		mescrollInit,
		downCallback,
		getMescroll
	} = useMescroll(onPageScroll, onReachBottom)
	const upOption = {
		noMoreSize: 1,
	}
	//跳转详情
	let goDetalis = (item) => {
		store.busliasdetals = item
		uni.navigateTo({
			url: '/page_my/storedvalue/storedvalueDetails/storedvalueDetails?detals=' + item.shopId+'&id='+item.id
		})
	}
	//获取初始化
	let orderData = ref([])
	const upCallback = (mescroll) => {
		// console.log("tabsIndex.value+1", tabsIndex.value + 1);
		setTimeout(() => {
			oredrlist({
				page: mescroll.num,
				limit: mescroll.size,
			}).then(res => {
				if (res.code === 200) {
					console.log('获取数据', res);
					const list = res.result || []
					if (mescroll.num === 1) orderData.value = []
					orderData.value = orderData.value.concat(list)
					console.log('list', orderData.value);
					mescroll.endBySize(list.length, res.result.total)
				}
			}).catch(() => {
				mescroll.endErr()
			})
		}, 500)

	}
</script>

<style lang="scss">
	.typeface {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	.typefacenum {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
	}
</style>